const { message, Table, Input, Icon, Button, Popconfirm, Radio, Card, notification, Modal, Popover, Tooltip} = antd;
const RadioGroup = Radio.Group;
var rowSelection = {
    
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(selectedRowKeys, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: record => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
    }),
    
};
var SelectData = [];
//列表浮层页面
class TableList extends React.Component {
    //行间按钮点击事件
    tableLineCallback(value,type,dataObj){
        vui.Catch.tableLineCallback(value,type,dataObj);
    }
    tableBtnCallback(value,dataArr,icon) {
        vui.Catch.tableBtnCallback(value,dataArr,icon);
    }
    tableImgCallback(value,imgSrc,dataObj){
    	vui.Catch.tableImgCallback(value,imgSrc,dataObj);
    }
    constructor(props) {
        super(props);
        var columns = this.props.data.columns;
        var _this = this;
        this.props.data.dataSource.map(function (target, index) {
            target.key = index + 1;
        })
        columns.map(function (target, index) {
            if (target.dataIndex == "column-Radio") {
                target.render = (text, record) => (
                    <Radio value={record.ID} />
                )
            }
            else if (target.dataIndex == "column-Num") {
                target.render = (text, record) => (
                    <span>{record.key}</span>
                )
            }
            else if (target.dataIndex == "control") {

                target.render = (text, record) => (
                    target.controlInfo.length>1?
                    <Popover content={
                            target.controlInfo.map((_target, _num) =>
                    
                    			_target['contrast'] ?
                    				record[_target['contrast']['index']] == _target['contrast']['detail'] ?
                    					_target['control'].map((_tar, _n) =>
                    						_tar['index'] ?
		                                    	record[_tar['index']] == _tar.state['none'] ?
		                                        ''
		                                        :
		                                        <Button size="small" style={{ margin: "2px 3px", fontSize: "12px", display: "block" }} onClick={() => _this.tableLineCallback(record.ID, _tar.value, record)}>{_tar.state[record[_tar['index']]]}</Button>
		                                    :
		                                    <Button size="small" style={{ margin: "2px 3px", fontSize: "12px", display: "block" }} onClick={() => _this.tableLineCallback(record.ID, _tar.value, record)}>{_tar.name}</Button>
                    					)
                    					:
                    					''
	                    			:
	                    			_target['index'] ?
	                                    record[_target['index']] == _target.state['none'] ?
	                                        ''
	                                        :
	                                        <Button size="small" style={{ margin: "2px 3px", fontSize: "12px", display: "block" }} onClick={() => _this.tableLineCallback(record.ID, _target.value, record)}>{_target.state[record[_target['index']]]}</Button>
	                                    :
	                                    <Button size="small" style={{ margin: "2px 3px", fontSize: "12px", display: "block" }} onClick={() => _this.tableLineCallback(record.ID, _target.value, record)}>{_target.name}</Button>
                    
                            )
                         }  trigger="hover" placement="bottom">
                        <div className="table_control_icon" />
                    </Popover>
                    :
                    <div>
                        {
                          target.controlInfo.map((_target, _num) =>
                                _target['index'] ? 
                                    record[_target['index']] == _target.state['none'] ?
                                        ''
                                        :
                                        <Button size="small" style={{ margin: "2px 3px", fontSize: "12px", display: "block" }} onClick={() => _this.tableLineCallback(record.ID, _target.value, record)}>{_target.state[record[_target['index']]]}</Button>
                                    :
                                    <Button size="small" style={{ margin: "2px 3px", fontSize: "12px", display: "block" }} onClick={() => _this.tableLineCallback(record.ID, _target.value, record)}>{_target.name}</Button>
                            )
                        }
                    </div>
                    
                )
            }
            else if (target.dataIndex == "inside-Img") {
                target.render = (text, record) => (
                    <a href={record.Src} target="_blank"><img src={record.Src} style={{maxWidth:'150px',maxHeight:'100px'}} alt=""/></a>
                )
            }
            else if (target.file && target.file !== '') {

                target.render = (text, record) => (
                    <span>
                    	{
                    		record[target.file].Url?
                    		<a href={record[target.file].Url} target="_blank">{record[target.file].Name}</a>:
                    		''
                    	}
			        </span>
                )
            }
            else if (target.multiLine == true) {
                target.render = (text, record) => (
                    <div>
                        {
                            record[target.dataIndex]?record[target.dataIndex].map((target,num)=>
	                            target.imgSrc?
	                            	<div onClick={() => _this.tableImgCallback(target.type, target.imgSrc, record)}  style={{cursor:'pointer'}}>
	                            		{target.text}
	                            		<Icon type="picture"
	                            			style={{paddingLeft:'5px',fontSize:'14px'}}
	                            			src={target.imgSrc}
                            			/>
                        			</div>:
                        				target.href?
                        				<div><a href={target.href}>{target.text}</a></div>:
                            			<div>{target}</div>
                            )
                            :
                            ""
                        }
                    </div>
                )
            }
            else if (target.className == "text_ovfl") {
                
                target.render = (text, record) => (
                    <Tooltip placement="top" title={text}>
                        <div className="text_ovfl">{text}</div>
                    </Tooltip>

                )
            }
        })
        var totalNum = this.props.data.pagination.total;
        if (this.props.data['notAsyn']) {
            var pagination = {
                showTotal: function () {
                    return "共 " + totalNum + " 条"
                }
            }
            Object.assign(this.props.data.pagination, pagination);
        } else {
            var pagination = {
                onShowSizeChange: function (current, size) {
                    _this.setState({
                        loading: true
                    })
                    vui.Catch.callBack(current, size, props);
                },
                onChange: function (page, pageSize) {
                    _this.setState({
                        loading: true,
                    })
                    vui.Catch.callBack(page, pageSize, props);
                },
                showTotal: function () {
                    return "共 " + totalNum + " 条"
                }
            }
            Object.assign(this.props.data.pagination, pagination);
        }
        
        this.state = this.props.data;
        this.setState({
            columns: columns,
            pagination: this.props.data.pagination,
            loading:this.props.data.loading
        })
    }
    componentWillReceiveProps(nextProps) {
        columns = nextProps.data.columns;
        var _this = this;
        const initNum = parseInt(nextProps.data.pagination.defaultPageSize)*parseInt(nextProps.data.pagination.defaultCurrent-1);
        nextProps.data.dataSource.map(function (target, index) {
            target.key = initNum+index + 1;
        })
        columns.map(function (target, index) {
            if (target.dataIndex == "column-Radio") {
                target.render = (text, record) => (
                    <Radio value={record.ID} />
                )
            }
            else if (target.dataIndex == "column-Num") {
                target.render = (text, record) => (
                    <span>{record.key}</span>
                )
            }
            else if (target.dataIndex == "control") {
                target.render = (text, record) => (
                    target.controlInfo.length > 1 ?
                        <Popover content={
                            target.controlInfo.map((_target, _num) =>
                                _target['contrast'] ?
                                    record[_target['contrast']['index']] == _target['contrast']['detail'] ?
                                        _target['control'].map((_tar, _n) =>
                                            _tar['index'] ?
                                                record[_tar['index']] == _tar.state['none'] ?
                                                    ''
                                                    :
                                                    <Button size="small" style={{ margin: "2px 3px", fontSize: "12px", display: "block" }} onClick={() => _this.tableLineCallback(record.ID, _tar.value, record)}>{_tar.state[record[_tar['index']]]}</Button>
                                                :
                                                <Button size="small" style={{ margin: "2px 3px", fontSize: "12px", display: "block" }} onClick={() => _this.tableLineCallback(record.ID, _tar.value, record)}>{_tar.name}</Button>
                                        )
                                        :
                                        ''
                                    :
                                    _target['index'] ?
                                        record[_target['index']] == _target.state['none'] ?
                                            ''
                                            :
                                            <Button size="small" style={{ margin: "2px 3px", fontSize: "12px", display: "block" }} onClick={() => _this.tableLineCallback(record.ID, _target.value, record)}>{_target.state[record[_target['index']]]}</Button>
                                        :
                                        <Button size="small" style={{ margin: "2px 3px", fontSize: "12px", display: "block" }} onClick={() => _this.tableLineCallback(record.ID, _target.value, record)}>{_target.name}</Button>
                            )
                        } trigger="hover" placement="bottom">
                            <div className="table_control_icon" />
                        </Popover>
                        :
                        <div>
                            {
                                target.controlInfo.map((_target, _num) =>
                                    target.controlInfo.map((_target, _num) =>
                                        _target['index'] ?
                                            record[_target['index']] == _target.state['none'] ?
                                                ''
                                                :
                                                <Button size="small" style={{ margin: "2px 3px", fontSize: "12px", display: "block" }} onClick={() => _this.tableLineCallback(record.ID, _target.value, record)}>{_target.state[record[_target['index']]]}</Button>
                                            :
                                            <Button size="small" style={{ margin: "2px 3px", fontSize: "12px", display: "block" }} onClick={() => _this.tableLineCallback(record.ID, _target.value, record)}>{_target.name}</Button>
                                    )
                                )
                            }
                        </div>

                )
            }

            else if (target.dataIndex == "inside-Img") {
                target.render = (text, record) => (
                    <a href={record.Src} target="_blank"><img src={record.Src} style={{ maxWidth: '150px', maxHeight: '100px' }} alt="" /></a>
                )
            }
            else if (target.file && target.file !== '') {

                target.render = (text, record) => (
                    <span>
                        {
                            record[target.file].Url ?
                                <a href={record[target.file].Url} target="_blank">{record[target.file].Name}</a> :
                                ''
                        }
                    </span>
                )
            }

            else if (target.multiLine == true) {
                target.render = (text, record) => (
                    <div>
                        {
                            record[target.dataIndex] ? record[target.dataIndex].map((target, num) =>
                                target.imgSrc ?
                                    <div onClick={() => _this.tableImgCallback(target.type, target.imgSrc, record)} style={{ cursor: 'pointer' }}>
                                        {target.text}
                                        <Icon type="picture"
                                            style={{ paddingLeft: '5px', fontSize: '14px' }}
                                            src={target.imgSrc}
                                        />
                                    </div> :
                                    target.href?
                        				<div><a href={target.href} target="_blank">{target.text}</a></div>:
                            			<div>{target}</div>
                            )
                                :
                                ""
                        }
                    </div>
                )
            }
            else if (target.className == "text_ovfl") {
                
                target.render = (text, record) => (
                    <Tooltip placement="top" title={text}>
                        <div className="text_ovfl">{text}</div>
                    </Tooltip>
                    
                )
            }

        })
        var totalNum = nextProps.data.pagination.total;
        
        
       
        if (nextProps.data['notAsyn']) {
            var pagination = {
                showTotal: function () {
                    return "共 " + totalNum + " 条"
                }
            }
            console.log(123);
            Object.assign(nextProps.data.pagination, pagination);
        } else {
            var pagination = {

                onShowSizeChange: function (current, size) {
                    _this.setState({
                        loading: true
                    })
                    vui.Catch.callBack(current, size, nextProps);
                },
                onChange: function (page, pageSize) {
                    _this.setState({
                        loading: true,
                    })
                    vui.Catch.callBack(page, pageSize, nextProps);
                },
                showTotal: function () {
                    return "共 " + totalNum + " 条"
                }
            }
            Object.assign(nextProps.data.pagination, pagination);
        }
        Object.assign(nextProps.data.pagination);
        this.setState(nextProps.data);
        
    }
    //table单选
    radioFn = (key) => {
        const {dataSource} = this.state;
        this.setState({isChoose: true, checkKey: key.target.value});
    }

    //验证是否有选中
    checkFn = () => {
        const {isChoose} = this.state;
        const {checkKey} = this.state;
        if (isChoose == false) {
            message.warning('请选择一个客户');
            return;
        }

        var obj = new Object();
        this.state.dataSource.map(function(target,index){
            if(target.ID+"" == checkKey) {
                obj = target;
                window.open('pageDetail.html?Pid=31d07d12-6f94-e711-80c7-00505686c900&&ID=' + checkKey);
                return false;
            }
        })
    }

    //table交互事件
    TableChange = (pagination, filters, sorter) => {
        if (vui.Catch.TableChanged) {
            
            vui.Catch.TableChanged(pagination, filters, sorter)
        }
    }

    render() {
        var _this = this;
        const {dataSource} = this.state;
        const {columns} = this.state;
        const {pagination} = this.state;
        const {loading}=this.state;
        const { TableTitle } = this.state;
        
        if(this.state['checkbox'] == true) {
            if (loading == true) {
                SelectData = [];
                rowSelection = {
                    selectedRowKeys:[],
                    onChange: (selectedRowKeys, selectedRows) => {
                        if (vui.Catch.checkFn && vui.Catch.checkFn != undefined) {
                            vui.Catch.checkFn(selectedRowKeys, selectedRows, _this.state)
                        }
                        SelectData = selectedRows;
                    },
                    getCheckboxProps: record => ({
                        disabled: record.name === 'Disabled User', // Column configuration not to be checked
                        name: record.name,
                    }),
    
                };
            } else {
                rowSelection = {
                    onChange: (selectedRowKeys, selectedRows) => {
                        if (vui.Catch.checkFn && vui.Catch.checkFn != undefined) {
                            vui.Catch.checkFn(selectedRowKeys, selectedRows, _this.state)
                        }
                        SelectData = selectedRows;
                    },
                    getCheckboxProps: record => ({
                        disabled: record.name === 'Disabled User', // Column configuration not to be checked
                        name: record.name,
                    }),
    
                };
            }
        } else if (this.state['radio'] == true) {
            if (loading == true) {
                SelectData = [];
                rowSelection = {
                    type: "radio",
                    selectedRowKeys: [],
                    onChange: (selectedRowKeys, selectedRows) => {
                        if (vui.Catch.checkFn && vui.Catch.checkFn != undefined) {
                            vui.Catch.checkFn(selectedRowKeys, selectedRows, _this.state)
                        }
                        SelectData = selectedRows;
                    },
                    getCheckboxProps: record => ({
                        disabled: record.name === 'Disabled User', // Column configuration not to be checked
                        name: record.name,
                    }),

                };
            } else {
                rowSelection = {
                    type: "radio",
                    onChange: (selectedRowKeys, selectedRows) => {
                        if (vui.Catch.checkFn && vui.Catch.checkFn != undefined) {
                            vui.Catch.checkFn(selectedRowKeys, selectedRows,_this.state)
                        }
                        SelectData = selectedRows;
                    },
                    getCheckboxProps: record => ({
                        disabled: record.name === 'Disabled User', // Column configuration not to be checked
                        name: record.name,
                    }),

                };
            }
        } else {
            rowSelection = '';
        }

        
        
        return (
            <div>
                {this.state.cardNone ? 
                    <div className="table_list">
                        <Table style={{ fontSize: "12px" }} onChange={this.TableChange} rowSelection={rowSelection} scroll={{ x: this.state.TableScrollX ? this.state.TableScrollX : "", y: this.state.TableScrollY ? this.state.TableScrollY : "" }} bordered loading={loading} dataSource={dataSource} columns={columns} pagination={pagination} data={this.props.data} />
                    </div>
                    :
                    <Card
                        type="inner"
                        title={TableTitle || '列表'}
                        extra={
                            <div style={{
                                position: 'absolute',
                                minWidth: "200px",
                                textAlign: "right",
                                right: "20px",
                                top: "11px"
                            }}>
                                {/*<Button size="small" onClick={this.checkFn}>查看</Button>*/}
                                {/*<Button size="small" style={{marginRight:"10px"}}>批量审定</Button>*/}

                                {/*<Button size="small" >导出</Button>*/}
                                {
                                    this.state.tableControl ? this.state.tableControl.map((target, index) =>
                                        target.icon ?
                                            <Button size="small" style={{ marginLeft: "10px" }} onClick={() => _this.tableBtnCallback(target.value, SelectData, target.icon)}>
                                                <Icon type={target.icon} style={{ fontWeight: 'bold' }} />
                                            </Button>
                                            :
                                            <Button size="small" style={{ marginLeft: "10px" }} onClick={() => _this.tableBtnCallback(target.value, SelectData)}>
                                                {target.name}
                                            </Button>
                                    )
                                        :
                                        ''
                                }

                            </div>
                        }
                    >
                        <RadioGroup style={{ display: "block" }} onChange={this.radioFn}>
                            <div className="table_list">
                                <Table
                                    style={{ fontSize: "12px" }}
                                    onChange={this.TableChange}
                                    rowSelection={rowSelection}
                                    scroll={{ x: this.state.TableScrollX ? this.state.TableScrollX : "", y: this.state.TableScrollY ? this.state.TableScrollY : "" }}
                                    bordered
                                    loading={loading}
                                    dataSource={dataSource}
                                    columns={columns}
                                    pagination={pagination}
                                    data={this.props.data} />
                            </div>
                        </RadioGroup>
                    </Card>
                    
                    
                    }
            </div>
        );
    }
}